<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 20px;
        }

        .box {
            width: 600px;
            height: 40px;
            margin: 200px auto;
            position: relative;
        }

        #txt {
            width: 498px;
            height: 38px;
            border: 1px solid #ccc;
            font-size: 20px;
        }

        #search {
            width: 100px;
            height: 40px;
        }

        #keywords {
            position: absolute;
            top: 40px;
            left: 0;
            background-color: rgb(12, 255, 24);
            list-style: none;
            width: 500px;
            ;
        }

        li {
            line-height: 24px;
            cursor: pointer;
        }
    </style>
    <script src="js/data.js"></script>
    <script src="js/get.js"></script>
</head>

<body>
    <div class="box">
        <div class="top">
            <input type="text" id="txt" /><input type="button" value="search" id="search" />
        </div>
        <ul id="keywords"></ul>
    </div>

    <script>
        // 检测用户输入行为：键盘事件
        // oninput输入数据  onkeyup键盘按键弹起  onkeydown键盘按键按下

        /*
            需求1：用户输入数据，拿到用户输入的数据，去“服务器”：数组匹配

            1. 获取事件源：input#txt  getElementById('txt');
            2. 确定事件类型：oninput （输入框建议用这个）
            3. 事件处理
            3.1 获取用户输入的数据：输入框.value
            3.2 用户每输入一下：事件触发一次，就会产生新的词条匹配，旧的应该干掉：ul.innerHTML = ''
            3.3 安全处理：不允许用户两边输入空格（首尾） String.trim()
            3.4 安全处理：用户没有输入数据：结束事件 return;
            3.5 去词条中匹配：词条是一个数组包含，遍历
            3.5.1 关键字匹配：词条.indexOf('用户输入的关键字') != -1
            3.5.2 创建一个li  document.createElement('li')
            3.5.2 将词条放到li中：li.innerText = 当前匹配的词条
            3.5.3 将li添加到ul后面：ul.appendChild(li)
        */

        // 1. 获取事件源：input#txt  getElementById('txt');
        let txt = get('#txt');
        let ul = get('#keywords');
        // 2. 确定事件类型：oninput （输入框建议用这个）
        txt.oninput = function () {
            // console.log(1);
            // 3. 事件处理
            // 3.1 获取用户输入的数据：输入框.value
            let value = txt.value;
            // console.log(value);
            // 3.2 用户每输入一下：事件触发一次，就会产生新的词条匹配，旧的应该干掉：ul.innerHTML = ''
            ul.innerHTML = '';
            // 3.3 安全处理：不允许用户两边输入空格（首尾） String.trim()
            value = value.trim();
            // console.log(value);
            // 3.4 安全处理：用户没有输入数据：结束事件 return;
            if (value.length == 0) { return; }
            // 3.5 去词条中匹配：词条是一个数组包含，遍历
            keywords.forEach(function (item) {
                // 每个item是一个字符串：词条
                // console.log(item);
                // 3.5.1 关键字匹配：词条.indexOf('用户输入的关键字') != -1
                // console.log(item.indexOf(value));
                // console.log(item.indexOf(value) != -1);
                if (item.indexOf(value) != -1) {
                    // 3.5.2 创建一个li  document.createElement('li')
                    let li = document.createElement('li');
                    // 3.5.2 将词条放到li中：li.innerText = 当前匹配的词条
                    li.innerText = item;
                    // 3.5.3 将li添加到ul后面：ul.appendChild(li)
                    ul.appendChild(li);

                    // 需求2：li的移入移出效果变化
                    li.onmouseover = function () {
                        li.style.backgroundColor = 'yellow';
                    };

                    li.onmouseout = function () {
                        li.style.backgroundColor = '';
                    };

                    // 需求3：li的点击事件
                    li.onclick = function () {
                        // 1. 先将被点击的内容：item
                        txt.value = item;

                        // 2. 清空匹配效果
                        ul.innerHTML = '';
                    };
                }

            });
        };

        // 新增需求：在页面不关闭的情况下，如果用户输入了一个不存在的词条，但是点击了search按钮：将用户输入的内容加入到新的词条中（下次可以查到）


    </script>
</body>

</html>